<template>
  <div class="w">
    <!-- 地址列表页面 -->
    <div v-if="!editlist">
      <div class="site_box">
        <!-- 收货人信息 -->
        <div class="site_item" v-for="(item,index) in  list " :key="item.id">
          <div class="site_item_box_con">
            <div @click="pageType(index)">
              <div class="flex-be-center site_item_box site_item_box_name">
                <span>{{item.name}}</span>
                <p class="flex-be-center">
                  <span>{{item.tel}}</span>
                  <img class="more" :src="img.more" alt="">
                </p>
              </div>
              <div class="site_item_box site_item_box_site">
                <p class="p-two">
                  {{item.province}}
                  {{item.city}}
                  {{item.area}}
                  {{item.details}}
                </p>
  
              </div>

            </div>
           
            <!-- 操作 列表-->
            <div class="flex-be-center compile">
              <div @click="Default(index,item.id)">
                <img :src="item.is_default==1?img.active:img.noactive" alt="">
                <span>设为默认地址</span>
              </div>
              <div class="flex-be-center">
                <div @click="edit(item.id,index)">
                  <img :src="img.edit" alt="">
                  <span>编辑</span>
                </div>
                <div @click="del(item.id,index)">
                  <img :src="img.del" alt="">
                  <span>删除</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 分割线 -->
          <div class="line">
            <img :src="item.is_default==1? img.line:''" alt="">
          </div>
        </div>


      </div>
      <!-- 添加收货地址 -->
      <div class="add_site" @click="addSite">
        <img :src="img.add" alt="">
        <span>添加收货地址</span>
      </div>

    </div>

    <!-- 编辑页面 -->
    <div v-if="editlist" class="compile_box">
      <div>
     
        <van-form @submit="onSubmit">
          <van-field
            v-model="frlist.name"
            name="姓名2"
            label=""
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="frlist.tel"
            type="tel"
            name="手机号码"
            label=""
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}
            ]"
          />
          <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label=""
          placeholder="点击选择省市区"
          @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onConfirm"
              @cancel="showArea = false"
            />
          </van-popup>
          <van-field
          v-model="frlist.details"
          type="tel"
          name="手机号"
          label=""
          placeholder="详细地址,如街道,楼牌号"
          :rules="[{ required: true, message: '请填写详细地址' },
            { pattern: /\S/, message: '请填写详细地址'}
          ]"
        />
        <div class="img_active" @click="activeimg=!activeimg">
          <img :src="activeimg?img.active : img.noactive" alt="">
          <span>设为默认地址</span>
        </div>
          <div style="margin-top: 1rem;">
            <van-button  block type="info" color="#D81E06"  native-type="submit" position="bottom">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <!-- <van-button native-type="submit" @click="save" color="#D81E06" size="large">保存</van-button> -->
    </div>


  </div>

</template>
<style lang="" scoped>
  .compile_box{
    /* padding-top: 1.77rem; */
    height: 100vh;
  }
  .compile_box>div{
    padding-top: 1.77rem;
    height: 100%;
  }
  .compile_box>div form{
    height: 100%;
  }
  .site_box {



    margin-top: 1.38rem;
  }

  .site_box .line img {
    width: 100%;
    height: 0.05rem;
  }

  /*联系人样式 */
  .site_box .site_item {
    /* height: 3rem; */
    font-size: 0.3rem;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding-top: 0.43rem;
    margin-bottom: 0.49rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rem 0rem 0rem 0rem rgba(225, 225, 225, 1);

  }

  .site_box .site_item_box_con {
    /* height: 2.90rem; */
  }

  .site_box .site_item .more {
    width: 0.13rem;
    height: 0.24rem;
    margin-left: 0.31rem;
  }

  .site_box .site_item .site_item_box {
    padding-left: 0.2rem;
    padding-right: 0.3rem;
  }

  .site_box .site_item_box_name {
    margin-top: 0.43rem;
    margin-bottom: 0.33rem;
  }

  .site_box .site_item_box_site {
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(167, 167, 167, 1);
    line-height: 0.36rem;
    margin-top: 0.33rem;
    margin-bottom: 0.61rem;
  }

  .site_box .site_item_box_site p {
    height: 0.72rem;
  }

  /* 操作列表样式 */
  .compile {
    font-size: 0.3rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding-left: 0.2rem;
    padding-right: 0.3rem;
    margin-bottom: 0.43rem;
  }

  .compile img {
    width: 0.26rem;
    margin-right: 0.13rem;
  }

  .compile div:nth-child(2)>div {
    margin: 0 0.23rem 0;
  }

  /* 添加地址 */
  .add_site {
    margin-top: 1.65rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .add_site img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.17rem;
  }
  /* 默认地址 */
  .img_active{
    display: flex;
    align-items: center;
    font-size:0.3rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin-top: 1.06rem;
  }
  .img_active img{
    width: 0.26rem;
    height: 0.26rem;
    margin-right: 0.22rem;
  }
</style>
<script>
  //轻提示
  //轻提示
  import { Toast } from 'vant';
  //弹出框
  import { Dialog } from 'vant';
  // Vue.use(Toast);
  //地址
  import { AddressEdit } from 'vant';
  //地址信息
  import AreaList from "@/assets/js/area.js"
  //地址列表
  import getData from '@/assets/js/axios.js'
  //支付页面地址
  import store from "@/store"

  export default {
    data() {
      return {
      lineindex:1,
        //表单2
      username: '',
      password: '',
      value: '',//省市区信息
      frlist:{
        id:"",
        name:"",
        tel:"",
        province:"",
        details:"",
      },//增加修改页面信息
      showArea: false,//省市级三联
      editlist: false,//编辑页面
      activeimg:false,//编辑页面的设为默认
      editid:"",
      edIndex:"",
        //sitelist: true,//地址列表页面
        list: [
          // {
          //   id: 0,
          //   name: '张三',
          //   site: "广东省 深证市 宝安区 西南街道2单元304",
          //   tel: '13000000000',
          //   isDefault: true,//是否是默认
          // },
          // {
          //   id: 2,
          //   name: '李四',
          //   site: "广东省 深证市 宝安区 西南街道2单元304",
          //   tel: '13000000000',
          //   isDefault: false,//是否是默认
          // }
        ],
        img: {
          add: require("../../assets/img/pay/add.png"),
          line: require("../../assets/img/pay/line.png"),
          more: require("../../assets/img/pay/more.png"),
          del: require("../../assets/img/pay/del.png"),
          edit: require("../../assets/img/pay/edit.png"),
          active: require("../../assets/img/pay/active.png"),
          noactive: require("../../assets/img/pay/noactive.png"),
          map: require("../../assets/img/pay/map.png"),
        },
        pattern: /\d{6}/,
        //地址选择
        areaList:AreaList,
        searchResult: []
      }
    },
    mounted () {
      getData.adSsindex().then(req=>{
        console.log(req,"地址信息");
        this.list=req.data.data;


      }).catch(err=>{

      });
      console.log(this.$router.go,"shangyice")
      
    },
    methods: {
      //设置默认地址
      Default(index,ids) {
        if(this.list[index].is_default==1){
          return Toast("该地址已经设为默认地址");
        };
        //var _this = this;
        //遍历,只设置一个
        console.log(this.list, index, ids)
        //this.$set(this.list[a], "isDefault", true);
        this.lineindex=index;
        var para={
          id:ids
        };
        getData.adsDefault(para).then(res=>{
          console.log(res,'neirong ');
          if(res.data.code==2000){
            //console.log(this.list[index].is_default,index,res.data.data,"修改前");
            for(var i=0;i<this.list.length;i++){
              this.list[i].is_default=0
            };
            this.list[index].is_default=res.data.data;
            Toast('设置成功');
            //console.log(this.list[index].is_default,"修改后");
          }
        }).catch(err=>{

        });



      
      },
      //编辑展示
      edit(ids,index) {
        //this.editlist = true,
          this.editlist = true;
          var para={
            id:ids
          };
          this.editid=ids;
          this.edIndex=index;
          getData.adsGetone(para).then(res=>{
            console.log(res,'查询的地址信息');
            this.value="";
            //赋值
          this.frlist=res.data.data;
          var valueSsq=res.data.data;
          var str=`${valueSsq.province}/${valueSsq.city}/${valueSsq.area}`
            console.log(str,"省市区")
            this.value=str;
            if(valueSsq.is_default==1){
              this.activeimg=true;
            }else{
              this.activeimg=false;
            };
            console.log(this.value,'赋值');
          }).catch(err=>{

          })

      },
      //删除
      del(ids,index) {
        Dialog.confirm({
          title: '确认删除',
          message: '',
        })
          .then(() => {
            var para={
              id:ids
            }
            getData.adsDel(para).then(req=>{
              console.log(req,"删除了")
              Toast(req.data.msg);
              if(req.data.code==2000){
                this.list.splice(index,1)
              }
            
            }).catch(err=>{

            })

          })
          .catch(() => {
            // on cancel
          });

      },

      //地址选择
      onSave() {
        this.editlist = false,
        this.sitelist = true,
        Toast('修改地址成功');
      },
      onChangeDetail(val) {
        if (val) {
          // this.searchResult = [
          //   {
          //     name: '黄龙万科中心',
          //     address: '杭州市西湖区',
          //   },
          // ];
        } else {
          this.searchResult = [];
        }
      },
//展开编辑页面
      addSite(){
        this.editlist=true;
         

      },
      //表单提交更改增加
      onSubmit(values) {
        //判断是否是编辑页面
        if(this.editid){
          console.log('zheshixiugai');
          // this.editid=ids;
          // this.edIndex=index;
          var attredit=values.area.split("/");
          if(attredit.length!=1){
        var para={
        id:this.editid,
        name:this.frlist.name,
        tel:this.frlist.tel,
        province:attredit[0],
        city:attredit[1],
        area:attredit[2],
        details:this.frlist.details,
        is_default:Number(this.activeimg)
      };
      getData.adseDit(para).then(req=>{
        console.log(req)
        Toast(req.data.msg)
        if(req.data.code==2000){
          //Toast("成功") ;
          this.editlist=false;
          this.value="";
          this.frlist="";
          console.log(req.data.data,"呀呀呀呀");
          this.list.splice(this.edIndex,1,req.data.data);
          this.editid="";
          this.edIndex="";
        }
      }).catch(err=>{

      })
      }


        }else{
          //增加提交
      //console.log('submit11', values.area);
      var attredit=values.area.split("/");
      //console.log(attredit[0])
      //console.log('submit22',this.frlist, );
        //console.log(this.activeimg,666,Number(this.activeimg))
      if(attredit.length!=1){
        var para={
        name:this.frlist.name,
        tel:this.frlist.tel,
        province:attredit[0],
        city:attredit[1],
        area:attredit[2],
        details:this.frlist.details,
        is_default:Number(this.activeimg)
      };
      getData.adseDit(para).then(req=>{
        console.log(req)
        Toast(req.data.msg)
        if(req.data.code==2000){
          //Toast("成功") ;
          this.editlist=false;
          this.value="";
          this.frlist="";
          this.list.push(req.data.data)
        }
      }).catch(err=>{

      })
      }else{
        Toast("请选择地址")
      }
        }

    

    },




    onConfirm(values) {
      this.value = values.map((item) => item.name).join('/');
      this.showArea = false;
    },

    //是否返回支付页面的提交
    pageType(index){
      console.log(this.$route.query.type)
      if(this.$route.query.type==1){
       // this.$router.go(-1);
        //this.list[index]
        //console.log(this.list[index]);
        sessionStorage.setItem("addinforlist",JSON.stringify(this.list[index]));//存储地址信息
        //store.commit("receipt",this.list[index]);
        //console.log(this.list[index],'存储的地址');
        this.$router.go(-1);
      }
      //this.$router.go(-1);
    }



    },


  }



</script>